<template>
  <div class="rev-query-expand" v-if="showExpand">
    <el-link type="primary" :underline="false" size="small" @click="queryExpand = !queryExpand">
      <template v-if="queryExpand">
        <ElIcon>
          <ArrowUp />
        </ElIcon>
        折叠
      </template>
      <template v-else>
        <ElIcon>
          <ArrowDown />
        </ElIcon>
        展开
      </template>
    </el-link>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { ElLink, ElIcon } from 'element-plus'

const emit = defineEmits(['expand'])

// 控制内容显示隐藏
const showExpand = ref(true)
const queryExpand = ref(false)

// 暴露字段，以便在外部可以控制显示/隐藏
defineExpose({
  showExpand,
  queryExpand
})

watch(
  () => queryExpand.value,
  (val) => {
    emit('expand', val)
  },
  {
    immediate: true
  }
)
</script>

<style scoped>
.extra-content {
  margin-top: 10px;
}
</style>
